前言

由於我在Youtube發現了此影片，所以決定往後每篇文章練習影片中一個小專案，加速對JavaScript的熟悉度。另外，有兩點要特別說明 :

• 我會注重在JavaScript的部分，所以HTML與CSS就不多做說明。
• 教學影片說明欄有附上每個專案程式碼的連結，每個專案皆有Setup與Final兩個版本，而我將偏重在功能的建置上，因此也不會在Header設定上多做介紹。

Color Flipper

功能說明

1. 導覽列 : 可以在Index(固定顏色頁面)和Hex(隨機Hex Color樣面)跳轉
2. 主頁面 :
   • 文字 : 顯示目前是什麼顏色
   • 按鈕 : 進行換色動作(固定顏色 or 隨機Hex色碼)

HTML重點

• 按鈕的id="btn"可以讓我們在之後的JavaScript部分中，利用document.getElementById()的方法來渲染該按鈕
• 重點程式碼如下 :

  ...
  <!-- 主頁面 -->
  <main>
      <div class="container">
  
          <!-- 塗色方塊 -->
          <h2>Background Color : <span class="color">#f1f5f78</span></h2>
          <!-- #f1f5f78為預設顯示字體 -->
  
          <!-- 換色按鈕 -->
          <button class = "btn btn-hero" id="btn">click me</button>
  
      </div>
  </main>
  <!-- javascript -->
  <script src="index.js"></script>
  ...
  

JavaScript重點 — index.html

1. 固定顏色種類，並存在名為colors的陣列中

   const colors = ["green", "red", "rgba(133,122,200)", "#f15025"]; 
   

2. 透過找取按鈕的id去渲染該按鈕

   const btn = document.getElementById('btn');
   

3. 透過CSS中的.color元素去渲染按鈕本身的顏色

   const color = document.querySelector('.color');
   

4. 建立一個得到隨機整數的函數，範圍是0~x

   function getRandomNumber(x){
       return Math.floor(Math.random() * x);
   }
   

   I. Math.random()會產生介於0到1之間的隨機小數
   II. 再乘上x自己，便會得到介於0到x之間的隨機小數
   III. 最後用Math.floor()無條件捨去，便能得到介於0到x之間的隨機整數

5. 最後透過addEventListener()方法，去為btn註冊一個新的點擊事件

btn.addEventListener('click',function(){

    const  randomNumber = getRandomNumber(colors.length);
    //利用前面的函數，隨機挑0~3其中的一個數字
    
    document.body.style.backgroundColor = colors[randomNumber];
    //改變背景色
    
    color.textContent = colors[randomNumber];
    //渲染按鈕顏色
});
...

JavaScript重點 — Hex.html

Hex Color Codes是由六個十六進位的數字所組成，詳情請見解釋

1. 將16個數字存在名為hex的陣列中

   const hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"]; 
   

2. 透過找取按鈕的id去渲染該按鈕

   const btn = document.getElementById('btn');
   

3. 透過CSS中的.color元素去渲染按鈕本身的顏色

   const color = document.querySelector('.color');
   

4. 建立一個得到隨機整數的函數，範圍是0~x

   function getRandomNumber(x){
       return Math.floor(Math.random() * x);
   }
   

第2~4點和上個例子皆相同

5. 最後透過addEventListener()方法，去為btn註冊一個新的點擊事件

btn.addEventListener('click',function(){

    let Hexcolor = "#";
    for(let i = 0; i < 6; i++){
        let index = getRandomNumber(hex.length);
        Hexcolor += hex[index];
    }
    //隨機抽出6個數字，並拼湊成一組Hex Color Code
    
    document.body.style.backgroundColor = Hexcolor;
    //改變背景色
    
    color.textContent = Hexcolor;
    //渲染按鈕顏色
});
...

參考來源

1. addEventListener()方法解釋
2. Hex Color Code介紹